<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
</head>
<body>
    <!-- 双向绑定 --删除 -->
    <div class="box">
        <input type="text" v-model="myContent">
        <!-- add()  加不加小括号都行 -->
        <button @click="add">增加</button>
        <!-- 其他长度了,取反为假了 -->
        <span v-show="!list.length">清空啦</span>
        
        <ul v-show="list.length">
            <li v-for="(data,index) in list">
                {{data}}
                <button @click="deletes(index)">删除</button>
            </li>

        </ul>
    </div>
    <script>
        let mm = new Vue({
            el:'.box',
            data:{
                list:['11','22','33'],
                myContent:''
            },
            methods:{
                add(){
                    // 把input里面的值添加到数组中去
                    if(this.myContent != ''){
                        this.list.push(this.myContent)
                    }
                    this.myContent = ''
                },
                deletes(index){
                    // // 删除数组  从index开始,删除1个  会改变数组的长度，而且可以替换
                    // splice(index,len,[item])  item时替换的数据，，，， 
                    this.list.splice(index,1)
                    

                }

            }
        })
    </script>
</body>
</html>